אני מעוניין לבדוק (בעזרת JAVASCRIPT כמובן) אם כל התמונות באתר סיימו לטעון, ורק במידה והם סיימו לטעון, לעשות פעולה מסויימת, כמו להציג את האתר, ובזמן שהתמונות טוענות, אני מעוניין לעשות איזה תמונת טעינה או משהו בסגנון.
איך אני יכול לעשות את זה?
תודה ושבת שלום!
12 תשובות
ענה
אני לא בטוח שאפשר להתייחס למשהו מסוים נטען אבל אפשר לעשות אם הכל נטען וזה בארוע onload אותו דבר אפשר להריץ משהו בזמן סגירת הדף onunload ויש עוד הרבה ארועים בשפה JS כמו אם יש שגיאה בשם של תמונה...
ענה
אפשר להתייחס למשהו מסויים אבל זה לא כל כך חשוב כי אם לא כל הדף נטען זה בין כה לכה יחכה עד שיסיים לטעון את כל הדף ואז יטען את מה שיקרה אחרי שהתמונה נטענת יש סדר התייחסות לדברים בJS וזה גם לא כך כך חחשוב להתייחס לדבר מסויים כשאמרתי שאני לא בטוח שאפשר התכוונתי שאפשר פשוט אין למה.
ענה
בעיקרון אפשר לטעון תמונה על ידי JS
ואז לחבר לה אירוע של onload.
objImage = new Image();
// set what happens once the image has loaded
objImage.onLoad=imagesLoaded();
// preload the image file
objImage.src='images/image1n.gif';
// function invoked on image load
function imagesLoaded()
{
document.body.appendChild(image);
alert('this image was loaded');
}
תצטרך שלנות קצת את הקוד, אולי למערך של תמונות ולחכות לכולן.
אבל, אתה בטוח שאתה צריך את זה? התמונות שלך בסופו של דבר יטענו יותר מהר מהתמונה של הloader
ענה
ממ אבל אם יש לו גלריה של תמונות ? זה יותר יעיל לטעון את כולם תוך כדי הצגת הדף ולא לפני
משה, איך אפשר לטעון את התמונות אחד אחד ולהציג את הדף?
שהדף יהיה מוצג ובמקום כל תמונה, יוצג תמונת טעינה עד שהתמונה תעלה?
אני רוצה שזה יתבצע אוטומטית על תמונות מעמוד מסויים, כמובן שזו לא בעיה, אבל אני מעדיף שחלק מהתמונות יעלו לפני שהאתר יעלה וחלק יעלו כמו שאמרת, כדי שהאתר יעלה מהר יותר.
חשבתי על משהו, הוספתי מאפיין בשם data-src לכל תמונה, ככה זה נראה:
ובקוד javascript השתמש ב jq ועשיתי את זה:
var datasrc = $(this).find("img").attr("data-src");
objImage = new Image();
objImage.onLoad=imagesLoaded($(this), datasrc);
objImage.src=datasrc;
function imagesLoaded(image, src)
{
image.find("img").attr("src",src);
}
});
האם זה הגיוני ועובד?
ז"א, זה עובד לי, אבל אני לא בטוח אם הדרך הזאת טובה.
ענה
אני אישית לא אוהב פתרונות JS כאלה, בעיקר בגלל שזה פשוט בזבוז של אמצעי SEO (ברוב המקרים) ולא הכי סמנטי שיש. אבל כן, נראה לי שזו גם הדרך הנהוגה למצבים כאלה כיום. אני מקווה שתהיה שיטה סמנטית יותר בעתיד (או אולי כבר יש?).
האתר שלי כולו פועל על AJAX, אין שום עמודים ושום דבר שצורך רענון, וזאת הסיבה שאני מעוניין רק בכניסה לדף למסוים שהתמונות יטענו, וגם שיטענו כמו שצריך, אחרת הוא תוקע לי את האפקטים.
ממ אני לא ממש מומחה לJS , אבל יש לי רעיון . אפשר אולי לטעון 15 תמונות ראשונות, ולתת את שאר התמונות שיטענו אחרי טעינת הדף.
כאילו ככה:
- טעינת של 15 דפים
- רק אחרי שהדף נטען :
השהייה של כמה שניות - סוג של sleep - ואז טעינת שאר התמונות לפי הסדר
או טעינת תמונות לפי הסדר עם השהייה קצרה של שתי שניות ככה
מקווה שזה עזר (: